<template>
	<view v-if="showTips" class="cu-box animation" :style="{ 'top': `${(custom ? navbarHeight : -4)}px`, 'animation-iteration-count': (duration - delay) / 3 }">
		<view class="arrow" :style="{ 'margin-right': `${arrowRight}px`, 'border-color': `transparent transparent ${color} transparent` }">
		</view>
		<view class='body' :style="{'margin-right': `${bodyRight}px`,'background-color': `${color}`}">
			<view class="tips" :style="{ 'color': textColor }">{{ text }}</view>
			<view class="cu-close close" @click='hidden'></view>
		</view>
	</view>
</template>

<script>
/**
 * @description 添加提示
 * @property {Boolean} custom - 是否自定义导航栏 默认false
 * @property {String} color - 背景颜色 默认#FFFFFF
 * @property {String} textColor - 文字颜色 默认#4D4D4D
 * @property {String} text - 提示文字 默认 '「添加到我的小程序」使用更方便哦'
 * @property {Number} duration - 动画时长 默认10 S
 * @property {Number} delay - 延迟时间 默认2 S
 */
const storeKey = 'add-tips';
export default {
	name: 'ui-add-tips',
	props: {
		custom: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: '#FFFFFF'
		},
		textColor: {
			type: String,
			default: '#4D4D4D'
		},
		text: {
			type: String,
			default: '「添加到我的小程序」使用更方便哦'
		},
		duration: {
			type: Number,
			default: 15
		},
		delay: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			showTips: false,
			navbarHeight: 0,
			arrowRight: 0,
			bodyRight: 0
		};
	},
	created() {
		if (uni.getStorageSync(storeKey)) return;
		const rect = uni.getMenuButtonBoundingClientRect() ? uni.getMenuButtonBoundingClientRect() : null;
		const { screenWidth } = uni.getSystemInfoSync();
		this.navbarHeight = rect.bottom;
		this.arrowRight = screenWidth - rect.right + rect.width * 3 / 4 - 5;
		this.bodyRight = screenWidth - rect.right;
		const startTimer = setTimeout(() => {
			this.showTips = true;
			clearTimeout(startTimer);
		}, this.delay * 1000);
		const endTimer = setTimeout(() => {
			this.showTips = false;
			clearTimeout(endTimer);
		}, (this.duration + this.delay) * 1000);
	},
	methods: {
		hidden() {
			this.showTips = false;
			uni.setStorageSync(storeKey, true);
		}
	},
}
</script>

<style lang="scss">
.cu-box {
	position: fixed;
	display: flex;
	right: 0;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
	z-index: 10000;

	.arrow {
		width: 0;
		height: 0;
		border-width: 5px;
		border-style: solid;
	}

	.body {
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx;

		.tips {
			flex: 1;
			font-size: 14px;
		}

		.close {
			font-size: 35rpx;
			margin-left: 10rpx;
			color: rgb(255, 0, 0);
		}
	}
}

.animation {
	animation: cu-box-animate 3s;
}

@keyframes cu-box-animate {
	0% {
		transform: scale(0.98);
		opacity: .9;
	}

	25% {
		transform: scale(1.03);
		opacity: 1;
	}

	50% {
		transform: scale(0.98);
		opacity: .9;
	}

	75% {
		transform: scale(1.03);
		opacity: 1;
	}

	100% {
		transform: scale(0.98);
		opacity: .9;
	}
}
</style>
